<template>
    <div class="budgetLedgerPage">
        <div class="search-wrap d-flex a-center flex-wrap">
            <div class="search-item d-flex a-center m-b10">
                <label>部门</label>
                <el-select v-model="form.departmentId" class="m-l5" placeholder="请选择部门">
                    <el-option v-for="(item,index) in departmentList" :key="index" :label="item.deptName" :value="item.deptId"></el-option>
                </el-select>
            </div>
            <div class="search-item d-flex a-center m-l20 m-b10">
                <label>项目名称</label>
                <el-input v-model="form.projectName" class="m-l5" placeholder="请输入项目名称"></el-input>
            </div>
            <div class="search-item d-flex a-center m-l20 m-b10">
                <label>年度</label>
                <el-date-picker
                        class="m-l10"
                        clearable
                        v-model="form.year"
                        value-format="YYYY"
                        size="large"
                        type="year"
                        placeholder="请选择"
                />
            </div>
            <div class="search-item d-flex a-center m-l20 m-b10">
                <label>科目</label>
                <el-cascader class="m-l5" v-model="form.subjectId" :show-all-levels="false" :props="props" />
            </div>
            <div class="search-item d-flex a-center m-l20 m-b10">
                <label>业务单元</label>
                <el-select class="m-l5" v-model="form.businessUnitId" clearable>
                    <el-option v-for="(item,index) in businessUnitList" :key="index" :label="item.businessUnitName" :value="item.businessUnitId"></el-option>
                </el-select>
            </div>
            <div class="search-item d-flex a-center m-l20 m-b10">
                <el-button
                    color="#fc702b"
                    style="color:#fff;"
                    @click.prevent="onQuery"
                >查询</el-button>
                <el-button
                    color="#f0f0f0"
                    style="color: #000000"
                    @click.prevent="onReset"
                >重置</el-button>
            </div>
            <el-divider direction="vertical" style="margin-top: -10px;" class="m-l10 m-r10"/>
            <div class="search-buttons m-b10">
                <el-button
                        class="button_edit"
                        @click="onExport"
                >
                    <svg-icon icon-class="project-detail-icon-derive" class="icon-export m-r5"></svg-icon>
                    一键导出
                </el-button>
            </div>
        </div>
        <public-table
                class="m-t20"
                index
                :page="page"
                :tableData="tableData"
                :tableOption.sync="tableOption"
                @page-change="onPageChange"
                @handleSelectionChange="handleSelectionChange"
        >
            <template #departmentName="scope">
                 <span
                     class="font-style"
                     style="cursor: pointer;color: #fc7037"
                     @click="toDepartment"
                 >{{scope.row.departmentName}}</span>
            </template>
            <template #capitalInflow="scope">
                <span
                    class="font-style"
                    :style="{'--font-cursor': scope.row.capitalInflow > 0 ? 'pointer':'default',
                    '--font-color':scope.row.capitalInflow > 0 ?'#fc7037':'#000'
                    }"
                    @click="getDetailsInfo('1',scope.row)"
                >{{scope.row.capitalInflow}}</span>
            </template>
            <template #capitalOutflow="scope">
                <span
                    class="font-style"
                    :style="{'--font-cursor':scope.row.capitalOutflow>0?'pointer':'default',
                    '--font-color':scope.row.capitalOutflow>0?'#fc7037':'#000'
                    }"
                    @click="getDetailsInfo('2',scope.row)"
                >{{scope.row.capitalOutflow}}</span>
            </template>
        </public-table>
    </div>
    <!-- 查看详情弹窗 -->
    <public-dialog
        :title="'流入流出明细'"
        :width="'60%'"
        v-model:visible="visible"
        @onConfirm="onConfirm"
        :confirmButtonTitle="'确认'"
    >
        <div class="public-dialog-content d-flex j-center a-center">
            <public-table
                class="m-t20"
                index
                border
                :page="page"
                :is-paging="false"
                :tableData="detailsList"
                :tableOption.sync="detailsOption"/>
        </div>
    </public-dialog>
</template>

<script setup>
import {ElCascader, ElDatePicker, ElDivider, ElMessage, ElOption, ElSelect} from "element-plus";
import PublicTable from "@/components/PublicTable";
import PublicDialog from "@/components/PublicDialog";
import {onMounted, reactive, ref} from "vue";
import {exportApi, fundManagementApi} from "@/api/businessFinance";
import {exportExcelFile, resetForm} from "@/common/utils/GlobalUtils";
import router from "@/router";

const page = reactive({
    total: 0,
    current: 1,
    size: 10
});

const tableData = ref([]);

const tableOption = ref([
    { label: "业务单元", prop: "businessUnitName", minWidth: 80 },
    { label: "部门", prop: "departmentName",slot: true, minWidth: 80 },
    { label: "年度 ", prop: "year", minWidth: 80 },
    { label: "季度 ", prop: "quarter", minWidth: 80 },
    { label: "流入合计", prop: "capitalInflow",slot:true,slotName:'capitalInflow', minWidth: 80 },
    { label: "流出合计", prop: "capitalOutflow",slot:true,slotName:'capitalOutflow', minWidth: 80 },
]);

const form = reactive({
    departmentId:'',
    year:'',
    subjectId:'',
    projectName:'',
    businessUnitId:''
});

const departmentList = ref([]);
const getDepartmentVo = () => {
    fundManagementApi.getDepartmentVo().then(res=>{
        departmentList.value = res.data;
    });
}

const getDepartmentSummaryVo = (param) => {
    fundManagementApi.getDepartmentSummaryVo(param).then(res=>{
        tableData.value = res.data.content;
        page.total = res.data.totalSize;
    });
}

const onQuery = () => {
    page.current = 1;
    page.size = 10;
    let param = {
        param: {
            ...form
        },
        pageNum: page.current,
        pageSize: page.size
    };
    getDepartmentSummaryVo(param);
}

const onReset = () => {
    resetForm(form);
    page.current = 1;
    page.size = 10;
    let param = {
        pageNum: page.current,
        pageSize: page.size
    };
    getDepartmentSummaryVo(param);
}

const onPageChange = (e) => {
    page.current = e.page;
    page.size = e.limit;
    let param = {
        param: {
            ...form
        },
        pageNum: page.current,
        pageSize: page.size
    };
    getDepartmentSummaryVo(param);
}

const exportList = ref([]);
const handleSelectionChange = (e) => {
    exportList.value = e;
}

const onExport = () => {
   exportApi.getDepartmentSummaryVoLeadingOut(form).then(res=>{
       if(res){
           exportExcelFile(res,'资金预算总台账表');
       }
   });
}

// 查询科目
const budgetSubjectList = ref([]);
const getBudgetSubjectList = (param) => {
    return fundManagementApi.getBudgetSubjectList(param).then(res=>{
        budgetSubjectList.value = res.data;
    });
}

const props = {
    lazy: true,
    emitPath:false,
    async lazyLoad(node, resolve) {
        const { level } = node;
        if(level === 0){
            await getBudgetSubjectList({
                subjectId:'',
                subjectType:'1'
            });
            let nodes = [];
            budgetSubjectList.value.forEach(item=>{
                nodes.push({
                    value: item.subjectId,
                    label: item.subjectName,
                    leaf: level >= 1,
                });
            });
            resolve(nodes);
        }

        if(level > 0 && level <= 1){
            await getBudgetSubjectList({
                subjectId:node.value,
                subjectType:'1'
            });
            let nodes = [];
            budgetSubjectList.value.forEach(item=>{
                nodes.push({
                    value: item.subjectId,
                    label: item.subjectName,
                    leaf: level >= 1,
                });
            });
            resolve(nodes);
        }
    },
}


const detailsOption = ref([
    { label: "科目名称", prop: "subjectName", minWidth: 80 },
    { label: "金额 ", prop: "budgetAmount", minWidth: 80 },
]);

// 查询部门汇总流入流出明细
const detailsList = ref([]);
const getDepartmentSummaryInfo = (param) => {
    return  fundManagementApi.getDepartmentSummaryInfo(param).then(res=>{
        if(res.code === '200'){
            detailsList.value = res.data;
        }
    });
}

const visible = ref(false);
const onConfirm = () => {
    visible.value = false;
}

// 查看详情
const getDetailsInfo =async (type,row) => {
    if(row.capitalInflow === 0 && type == 1){
        return;
    }
    if(row.capitalOutflow=== 0 && type == 2){
        return;
    }
   await getDepartmentSummaryInfo({
        departmentId:row.departmentId,
        year:row.year,
        quarter:row.quarter,
        type:type
    });
   visible.value = true;
}

/**
 * 跳转部门
 */
const toDepartment = () => {
    router.push({path:`/businessFinance/fundManagement/fundBudgetManagement/budgetLedger2`});
}

/**
 * 获取业务单元
 */
const businessUnitList = ref([]);
const getFundBudgetBusinessUnitAll = () => {
    fundManagementApi.getFundBudgetBusinessUnitAll().then(res=>{
        if(res.code === '200'){
            businessUnitList.value = res.data;
        }
    });
}


onMounted(()=>{
    getDepartmentVo();
    getFundBudgetBusinessUnitAll();
    getDepartmentSummaryVo({
        pageNum:1,
        pageSize:10
    });
});
</script>

<style lang="scss" scoped>
.font-style{
    color: var(--font-color);
    cursor: var(--font-cursor);
}
.public-table-container{
    width: 100%;
}
.budgetLedgerPage{
  .search-wrap{
    .search-item{
      .el-input{
        width: auto !important;
      }
    }
    .search-buttons{
      .icon-export{
        width: 18px;
        height: 18px;
      }
    }
  }
}
</style>
